{% extends "admin/base_site.html" %}
{% load i18n static %}
{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static " admin/css/forms.css" %}">{% endblock %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}
<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %} {% trans 'Change password' %} /
<a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; {% trans 'Password change' %}
</div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content %}
{% if request.GET.dialog == '1' %}
<style type="text/css">
    body, #container {
        background: #FFF;
    }

    #content {
        box-shadow: none;
    }
</style>
{% endif %}
<div id="content-main" class="form-main">
    <div>
        <el-alert
                title="{% trans " Please enter your old password, for security
        's sake, and then enter your new password twice so we can verify you typed it in correctly." %}"
        type="success">
        </el-alert>

        {% if form.errors %}
        {% if form.errors.items|length == 1 %}
        <el-alert
                title="{% trans " Please correct the error below.
        " %}"
        type="error">
        </el-alert>
        {% else %}
        <el-alert
                title="{% trans " Please correct the errors below.
        " %}"
        type="error">
        </el-alert>
        {% endif %}
        {% endif %}

        <el-form ref="form" :model="form" label-width="100px" method="post" id="password_form">

            {% csrf_token %}
            <el-form-item label="{% trans 'Old password' %}">
                <el-input v-model="form.oldPassword" name="old_password" show-password></el-input>
                {{ form.old_password.errors }}
            </el-form-item>

            <el-form-item label="{% trans 'New password' %}">
                <el-input v-model="form.newPassword1" name="new_password1" show-password></el-input>
                {{ form.new_password1.errors }}
                {% if form.new_password1.help_text %}
                <div class="help">{{ form.new_password1.help_text|safe }}</div>
                {% endif %}
            </el-form-item>

            <el-form-item label="{% trans 'Confirm password:' %}">
                <el-input v-model="form.newPassword2" name="new_password2" show-password></el-input>
                {{ form.new_password2.errors }}
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="formSubmit()"
                           style="float: right;"
                           icon="el-icon-edit-outline">{% trans 'Change my password' %}
                </el-button>
            </el-form-item>

        </el-form>


    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#content-main',
        data: {
            form: {
                oldPassword: '',
                new_password1: '',
                new_password2: ''
            }
        },
        methods: {
            formSubmit: function () {
                document.getElementById('password_form').submit();
            }
        }
    });
</script>

{% endblock %}
